import React from 'react';

import { Balloon } from '@teamix/ui';
import { YunxiaoIcon } from '@alife/devops-ui';
import IconFont from '../icon-font';
import './index.scss';
import intl from '../../../../../../../../locale';

const { Tooltip } = Balloon;

export const statusMap = {
  waiting: {
    label: intl.get({
      id: 'code-assets.containers.instance-status-icon.Waiting',
      defaultMessage: '等待中',
    }),
    icon: <IconFont type="hold-o-fill" size="small" />,
  },

  canceled: {
    label: intl.get({
      id: 'code-assets.containers.instance-status-icon.Canceled',
      defaultMessage: '已取消',
    }),
    icon: <IconFont type="failed-o-fill" size="small" />,
  },

  cancelled: {
    label: intl.get({
      id: 'code-assets.containers.instance-status-icon.Canceled',
      defaultMessage: '已取消',
    }),
    icon: <IconFont type="failed-o-fill" size="small" />,
  },

  cancel: {
    label: intl.get({
      id: 'code-assets.containers.instance-status-icon.Canceled',
      defaultMessage: '已取消',
    }),
    icon: <IconFont type="failed-o-fill" size="small" />,
  },

  finish: {
    label: intl.get({
      id: 'code-assets.containers.instance-status-icon.Completed',
      defaultMessage: '已完成',
    }),
    icon: <IconFont type="success-o-fill" size="small" />,
  },

  success: {
    label: intl.get({
      id: 'code-assets.containers.instance-status-icon.RunSuccessfully',
      defaultMessage: '运行成功',
    }),
    icon: <IconFont type="success-o-fill" size="small" />,
  },

  running: {
    label: intl.get({
      id: 'code-assets.containers.instance-status-icon.Running',
      defaultMessage: '运行中',
    }),
    icon: <IconFont type="loading-o-fill" size="small" />,
  },

  cancelling: {
    label: intl.get({
      id: 'code-assets.containers.instance-status-icon.Canceling',
      defaultMessage: '取消中',
    }),
    icon: <IconFont type="loading-o-fill" size="small" />,
  },

  fail: {
    label: intl.get({
      id: 'code-assets.containers.instance-status-icon.Failed',
      defaultMessage: '运行失败',
    }),
    icon: <IconFont type="failed-o-fill" size="small" />,
  },

  pause: {
    label: intl.get({
      id: 'code-assets.containers.instance-status-icon.Paused',
      defaultMessage: '暂停中',
    }),
    icon: <IconFont type="pause-o-fill" size="small" />,
  },

  init: {
    label: intl.get({
      id: 'code-assets.containers.instance-status-icon.Waiting',
      defaultMessage: '等待中',
    }),
    icon: <IconFont type="hold-o-fill" size="small" />,
  },

  ready: {
    label: intl.get({
      id: 'code-assets.containers.instance-status-icon.Waiting',
      defaultMessage: '等待中',
    }),
    icon: <IconFont type="hold-o-fill" size="small" />,
  },

  skip: {
    label: intl.get({
      id: 'code-assets.containers.instance-status-icon.Skipped',
      defaultMessage: '已跳过',
    }),
    icon: <IconFont type="success-o-fill" size="small" />,
  },

  default: {
    label: status,
    icon: <YunxiaoIcon type="question-line" size="small" />,
  },

  dormant: {
    label: intl.get({
      id: 'code-assets.containers.instance-status-icon.NotExecuted',
      defaultMessage: '未执行',
    }),
    icon: <IconFont type="failed-o-fill" size="small" />,
  },
};

export const getStatus = (status, resultStatus, flowStatus) => {
  if (flowStatus === 'CANCELED' && status === 'INIT') {
    return 'dormant';
  }
  const result = status === 'FINISH' ? resultStatus : status;
  return (result || 'default').toLowerCase();
};

/**
 * 状态标签
 */
export const StatusAbleLabel = ({ status = '', resultStatus = '', withIcon = false }) => {
  const statusResult = getStatus(status, resultStatus);
  const s = statusMap[statusResult.toLowerCase()] || statusMap.default;
  return (
    <div className={`inst-status-label inst-status-label-${statusResult}`}>
      {withIcon && <StatusIconWithBallon status={statusResult} />}
      {s.label}
    </div>
  );
};

/*
 * 状态Icon
 * 使用Pipeline, Group, Stage, Componet的状态展示
 */
export const StatusAbleIcon = ({ status = '', resultStatus = '' }) => {
  const s = getStatus(status, resultStatus);
  return <StatusIconWithBallon status={s} />;
};

/*
 * 状态Icon
 * 建议直接使用StatusAbleIcon
 */
const StatusIconWithBallon = ({ status }) => {
  const s = statusMap[status.toLowerCase()] || statusMap.default;
  return (
    <div className={`inst-status-icon inst-status-icon-${status.toLowerCase()}`}>
      <Tooltip type="primary" align="t" trigger={s.icon} popupProps={{ delay: 800 }}>
        {s.label}
      </Tooltip>
    </div>
  );
};

export const StatusIcon = ({ status }) => {
  const s = statusMap[status.toLowerCase()] || statusMap.default;
  return s.icon;
};

export default StatusIconWithBallon;
